<template>
  <div class="">
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptions"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 20px">
      <BasicTitle :title="t('custom.分类月报汇总图表')"></BasicTitle>
      <Chart :item-data="chartData" style="width: 100%; height: 330px"></Chart>
    </BasicCard>
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptionsClass"> </BasicVxeTable>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { columns, columnsClass } from './data'
  import Chart from './chart.vue'
  import { getPingZhongYueBao_xs, postHuoQuPeiZhi } from '@/api/shuJuBaoBiao'

  const { t } = useI18n()

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: '',
      isCustom: false,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-pingzhongfenleiyuebao`, // id用于缓存,务必配置
    maxHeight: 500,
    loading: true,
    showFooter: true,
    columns,
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '品种分类月报'
    },
    footerMethod({ columns, data }) {
      return footerMothodFunc(columns, data, 2)
    }
  })

  const gridOptionsClass = reactive<BasicGridProps>({
    extraConfig: {
      title: '',
      isCustom: false,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-pingzhongfenleiyuebaoclass`, // id用于缓存,务必配置
    maxHeight: 500,
    loading: true,
    showFooter: true,
    columns: columnsClass,
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '品种班组分类月报'
    },
    footerMethod({ columns, data }) {
      return footerMothodFunc(columns, data, 3)
    }
  })

  const yueArr = ref([])
  const monthValue = ref()
  const time1 = ref()
  const time2 = ref()
  const getInfo = () => {
    postHuoQuPeiZhi({
      searchKeys: ['月报周期设置']
    }).then((res: any) => {
      let items = res
      items.forEach((value) => {
        if (value.key == '月报周期设置') {
          yueArr.value = value.value.split(',')
          if (
            parseInt(dayjs().format('DD')) > parseInt(yueArr.value[3]) &&
            parseInt(dayjs().format('DD')) < 32
          ) {
            monthValue.value = dayjs().add(1, 'month').format('YYYY-MM')
          } else {
            monthValue.value = dayjs().format('YYYY-MM')
          }
          time1.value =
            dayjs(monthValue.value).subtract(1, 'month').format('YYMM') + yueArr.value[1]
          time2.value = dayjs(monthValue.value).format('YYMM') + yueArr.value[3]
          gridOptions.extraConfig.title =
            '品种分类月报' + '（上月' + yueArr.value[1] + '-当月' + yueArr.value[3] + '日）'
          gridOptionsClass.extraConfig.title =
            '品种班组分类月报' + '（上月' + yueArr.value[1] + '-当月' + yueArr.value[3] + '日）'
        }
      })
      getList()
    })
  }

  const chartData = ref()
  const getList = () => {
    getPingZhongYueBao_xs({ TsIdStart: time1.value + '01', TsIdEnd: time2.value + '99' })
      .then((res: any) => {
        gridOptions.loading = false
        gridOptionsClass.loading = false
        gridOptions.data = res.byMaterial
        gridOptionsClass.data = res.byTeamsetMaterial
        let pingZhongArr: any = []
        let xiaoLvgArr: any = []
        let zhongLiangArr: any = []
        res.byMaterial.map((value) => {
          pingZhongArr.push(value.materialName)
          xiaoLvgArr.push(
            value.efcRun == null ? value.efcRun : Math.round(value.efcRun * 100) / 100
          )
          zhongLiangArr.push(
            value.theoreticalYarnWeight == null
              ? value.theoreticalYarnWeight
              : Math.round(value.theoreticalYarnWeight * 100) / 100
          )
        })
        chartData.value = {
          pingZhongArr: pingZhongArr,
          xiaoLvgArr: xiaoLvgArr,
          zhongLiangArr: zhongLiangArr
        }
      })
      .catch(() => {
        gridOptions.loading = false
        gridOptionsClass.loading = false
      })
  }

  const footerMothodFunc = (columns, data, index) => {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        } else if (columnIndex === index) {
          return handleFunc(data, 'total', 'theoreticalYarnWeight')
        } else {
          return '--'
        }
      })
    ]
  }

  const handleFunc = (data, type, key, divisor = 1) => {
    let count = 0
    data.forEach((item) => {
      count += item[key] / divisor
    })
    return type == 'total' ? count.toFixed(2) : (count / data.length).toFixed(1)
  }

  onMounted(() => {
    getInfo()
  })
</script>
